<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-switch.css">

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap-switch.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>


<style>
* {
	padding: 0;
	margin: 0;
}

html, body {
	height: 100%
}

/* FOUR */
.hamburger .line {
	width: 100%;
	height: 3px;
	background-color: #ecf0f1;
	display: block;
	margin: 4px auto;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.hamburger:hover {
	cursor: pointer;
}

.button-active .line:nth-child(1), .button-active .line:nth-child(3) {
	width: 85%;
}

.button-active .line:nth-child(1) {
	transform: translateX(3px) rotate(45deg);
}

.button-active .line:nth-child(3) {
	transform: translateX(3px) rotate(-45deg);
}

.glyphicon:not(.glyphicon-chevron-right){
	font-size:20px;
}

.top-nav {
	width: 100%;
	position: fixed;
	background-color: rgb(0, 150, 136);
}

/*表头*/
.top-nav .top-header {
	width: 200px;
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

.top-nav .top-header .header-content {
	width: 150px;
	float: left;
	text-align: center;
	padding: 15px;
}

.top-nav .header-active {
	position: absolute;
	-webkit-transform: translateX(-150px);
	-ms-transform: translateX(-150px);
	-o-transform: translateX(-150px);
	transform: translateX(-150px);
}

.top-nav .top-header .hamburger {
	float: left;
	height: 50px;
	width: 50px;
	padding: 15px;
}

.top-nav .top-header .hamburger:hover {
	background: rgb(0, 99, 90);
}

.top-nav .top-header a {
	font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
	font-weight: 500;
	color: rgb(34, 45, 50);
	text-decoration: none;
}

/*浮动列表项*/
.top-nav .list {
	padding-left: 50px;
}

.top-nav .tabs li:not(.dropdown-item){
	float:left;
	list-style-type:none;
}
.top-nav li a {
	display: block;
	font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
	font-weight: 500;
	color: rgb(34, 45, 50);
	padding: 15px;
	text-decoration: none;
}

.top-nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #f1f1f1;
}

/* 鼠标移动到选项上修改背景颜色 */
.top-nav li a:hover {
	background-color: #555;
	color: white;
}

/*下部*/
.combine-nav {
	height: 100%;
	padding-top: 50px;
}

.side-nav {
	position: fixed;
	word-break: keep-all;
	/* 不换行 */
	white-space: nowrap;
	/* 不换行 */
	overflow: hidden;
	/* 内容超出宽度时隐藏超出部分的内容 */
	height: 100%;
	width: 200px;
	background: rgb(34, 45, 50);
	transition: width 0.1s;
}

.combine-nav .side-active {
	width: 50px;
}

.side-nav .sidebar ul {
	list-style-type: none;
}

.side-nav .sidebar a {
	font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
	color: white;
}

.side-nav .sidebar a:hover, .side-nav .sidebar .active, .side-nav .sidebar a:focus
	{
	background: rgb(13, 18, 20);
}

.side-nav .sidebar #collapseList span {
	visibility: hidden;
}

.side-nav .sidebar #collapseList li {
	font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
	background-color: rgb(34, 45, 50);
}

.side-nav .sidebar span {
	margin-right: 15px;
}

/*详细信息页面*/
.combine-nav .content-nav {
	height: 100%;
	margin-left: 200px;
	background-color: rgb(238, 239, 241);
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

.content-nav .inner {
	height: 100%;
	background-color: white;
}

.content-nav #iframepage {
	height: 100%;
	width: 100%;
	border: none;
}

.tab-pane {
	padding: 10px;
}

.table {
	table-layout: fixed;
}
</style>
</head>

<body>
	<div id="content">
		<!--顶部导航栏-->
		
		<div class="top-nav">
			<div class="top-header" style="float:left">
				<div class="header-content">
					<a href="index.html">System</a>
				</div>
				<div class="hamburger" id="hamburger-4">
					<span class="line"></span> <span class="line"></span> <span
						class="line"></span>
				</div>

			</div>

			<div class="list">
				<ul class="tabs">
					<li><a href="index.html">实时舆情</a></li>
					<li><a href="analysis.html">舆情分析</a></li>
					<li><a href="custom.html">我的舆情</a></li>
					<li class="dropdown" style="float:right;"><a href="#"
						id="user" class="dropdown-toggle" data-toggle="dropdown"> 用户 </a>
						<ul class="dropdown-menu dropdown-menu-right">
							<li class="dropdown-item"><a href="user.html">账户信息</a></li>
							
							<li class="dropdown-item"><a href="#" onclick="logout()">登出</a>
							</li>
						</ul></li>
				</ul>

			</div>
		</div>
		
		<div class="combine-nav">
			<!--侧边导航栏-->
			<div class="side-nav">
				<nav class="sidebar">
					<ul class="nav">
						<li class="active"><a href="#"> <span
								class="glyphicon glyphicon-signal"></span> 账户信息
						</a></li>
					</ul>
				</nav>
			</div>
			<!--内容-->
			<div class="content-nav" id="content-nav">
				<div class="inner"
					style="background:rgb(238, 239, 241);padding:15px;">
					<div style="background:white">
						<ul id="myTab" class="nav nav-tabs">
							<li class="active"><a href="#userInfo" data-toggle="tab">
									个人资料 </a></li>
							<li><a href="#detail" data-toggle="tab"> 个人设置 </a></li>
						</ul>
						<div id="myTabContent" class="tab-content">
							<div class="tab-pane fade in active" id="userInfo">
								<table class="table">
									<tbody>
										<tr>
											<td>用户名:</td>
											<td colspan="5" id="nickname"></td>
										</tr>

										<tr>
											<td>注册邮箱:</td>
											<td colspan="5" id="email"></td>
										</tr>

										<tr>
											<td>注册手机:</td>
											<td colspan="5" id="phone"></td>
										</tr>

										<tr>
											<td></td>
											<td colspan="5">
												<button id="changeBtn" class="btn btn-primary"
													data-toggle="modal">修改密码</button>
												
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							
							<div class="tab-pane fade" id="detail">
								<table class="table">
									<tbody>
										<tr>
											<td>开启舆情预警</td>
											<td colspan="5" id="warn">
												<input type="checkbox" name="my-checkbox" data-size="small" checked>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--模态框-->
			<!--修改密码-->
			<div class="modal fade" id="passwdModal" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">修改密码</h4>
						</div>
						<div class="modal-body">
							<table class="table">
								<tr>
									<td>请输入旧密码:</td>
									<td><input type="password" id="oldpsw"></td>
									<td id="olderr" style="color: red"></td>
								</tr>

								<tr>
									<td>请输入新密码:</td>
									<td><input type="password" id="newpsw"></td>
									<td id="newerr" style="color: red"></td>
								</tr>

								<tr>
									<td>请再次输入新密码</td>
									<td><input type="password" id="confirmpsw"></td>
									<td id="confirmerr" style="color: red"></td>
								</tr>
							</table>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" data-toggle="modal"
								onclick="confirmModal()">提交</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>

			<!--确认输入信息-->
			<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">确认</h4>
						</div>
						<div class="modal-body">是否确认提交修改信息?</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">关闭</button>
							<button id="confirmChangeBtn" type="button"
								class="btn btn-primary">提交更改</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>

			

			<!--操作结果-->
			<div class="modal fade" id="resultModal" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">操作信息</h4>
						</div>
						<div id="change-info" class="modal-body">密码错误!</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal" onclick="backLogin()">关闭</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function backLogin() {
			window.location.href = "login.html";
		}
		$("#oldpsw").blur(function() {
			var oldpsw = $("#oldpsw").val();
			if (oldpsw == "") {
				$("#olderr").html("请输入原密码");
			} else {
				$("#olderr").html("");
			}
		});
		$("#newpsw").focus(function() {
			var reg = /^[\w]{6,12}$/;
			var newpsw = $("#newpsw").val();
			if (!reg.test(newpsw)) {
				$("#newerr").html("6-12位字母或数字");
			}
		});
		$("#newpsw").blur(function() {
			var newpsw = $("#newpsw").val();
			var reg = /^[\w]{6,12}$/;
			if (newpsw == "") {
				$("#newerr").html("新密码不能为空");
			} else if (!reg.test(newpsw)) {
				$("#newerr").html("密码格式错误");
			} else {
				$("#newerr").html("");
			}
		});
	
		$("#confirmpsw").blur(function() {
			var confirmpsw = $("#confirmpsw").val();
			var newpsw = $("#newpsw").val();
			if (newpsw != confirmpsw) {
				$("#confirmerr").html("两次输入密码不一致")
			} else {
				$("#confirmerr").html("")
			}
		});
		$("#confirmChangeBtn").click(function() {
			var newpsw = $("#newpsw").val();
			var userid = localStorage.getItem("userid");
			$.ajax({
				type : "post",
				url : "/POSystem/ChangePsw",
				dataType : "json",
				data : {
					"userid" : userid,
					"newpsw" : newpsw
				},
				success : function(data) {
					if (data.status == 1) {
						resultModal(1);
					} else {
						resultModal(0);
					}
				},
				error : function() {
					alert("修改信息失败");
				}
			})
		});
		$("#changeBtn").click(function() {
			$("#newpsw").val("");
			$("#confirmpsw").val("");
			$("#oldpsw").val("");
			$("#newerr").text("");
			$("#confirmerr").text("");
			$("#olderr").text("");
			$("#passwdModal").modal("toggle");
		});
		window.onload = function() {
			var userid = localStorage.getItem("userid");
			$.ajax({
				type : "get",
				url : "/POSystem/PersonInfo?userid=" + userid,
				dataType : "json",
				success : function(data) {
					if (data.status == 1) {
						var info = data.data;
						$("#email").html(info.email);
						$("#nickname").html(info.nickname);
						$("#phone").html(info.phone);
					} else {
						console.log("error")
					}
				},
				error : function() {
					alert("出现异常");
				}
			});
			
			
			var url="/POSystem/WarningStateServlet?userid="+userid;
	
			$.get(url, function(data) {
				var dataJson = JSON.parse(data);	
				if (dataJson.data == "0") {
					$('[name="my-checkbox"]').bootstrapSwitch('state',false);
            	} else {
					$('[name="my-checkbox"]').bootstrapSwitch('state',true);
           		}
	
				$("[name='my-checkbox']").bootstrapSwitch(
					"onSwitchChange", function(event, state) {
						var flag;
						if (state == false) {
							flag = "0";
						} else {
							flag = "1";
						}
						var updateUrl = "/POSystem/UpdateWarningServlet?userid=" + userid + "&state=" + flag;
						$.get(updateUrl);
					}
				);
				$("[name='my-checkbox']").bootstrapSwitch('size', 'small');
	
			}); 
			
		}
		function confirmModal() {
			var newpsw = $("#newpsw").val();
			var confirmpsw = $("#confirmpsw").val();
			var userid = localStorage.getItem("userid");
			var oldpsw = $("#oldpsw").val();
			if (newpsw == confirmpsw && newpsw != "") {
				$.ajax({
					type : "post",
					url : "/POSystem/CheckPassword",
					dataType : "json",
					data : {
						"password" : oldpsw,
						"userid" : userid
					},
					success : function(data) {
						if (data.status == 1) {
							$("#passwdModal").modal("toggle");
							//$("#infoModal").modal("toggle");
							$("#confirmModal").modal("toggle");
						} else {
							$("#olderr").html("原密码输入错误");
						}
	
					},
					error : function() {
						alert("发生错误")
					}
				});
			} else {
				$("#confirmerr").html("两次输入密码不一致")
			}
	
		}
	
		function resultModal(state) {
			$("#confirmModal").modal("toggle");
	
			if (state == 1) {
				$("#change-info").html("修改成功,请重新登录");
			} else {
				$("#change-info").html("发生异常，修改失败");
			}
			$("#resultModal").modal("toggle");
		}
		
		$(document).ready(function() {
			
	
			someCustom();
			
			$(".hamburger").click(function() {
				//内容自适应
				var detailContent = $('.content-nav:first');
				detailContent.toggleClass("content-active");
				changeContentSize(detailContent);
	
				$(".top-header").toggleClass("header-active");
				$(".side-nav").toggleClass("side-active");
				$(this).toggleClass("button-active");
			});
			
			
		});
		function logout() {
			localStorage.removeItem("userid");
			localStorage.removeItem("username");
	
			window.location.href = "login.html";
		}
	
		function someCustom() {
			$(".dataTables_wrapper .dataTables_paginate .paginate_button:hover").css("background", "rgb(249,249,249)");
			$(".table>tbody>tr>td").css("border", "0px");
		}
	
		function changeContentSize(detailContent) {
			if (detailContent.hasClass("content-active")) {
				detailContent.css({
					"margin-left" : "50px"
				})
			} else {
				detailContent.css({
					"margin-left" : "200px"
				})
			}
		}
		function changeFrameHeight() {
            var ifm = document.getElementById("content-nav");
            ifm.height = document.documentElement.clientHeight;

        }

        window.onresize = function () {
            changeFrameHeight();
        }
	</script>
</body>

</html>